<template>
  <div class="content-box button-demo">
    <h2 class="demo-title">Checkbox 多选框</h2>
    <p class="demo-introduction">一组备选项中进行多选</p>
    <g-anchor>
      <g-anchor-link href="checkbox-simple" title="基础用法" />
      <g-anchor-link href="checkbox-disabled" title="禁用状态" />
      <g-anchor-link href="checkbox-group" title="多选框组" />
      <g-anchor-link href="checkbox-api" title="API" />
    </g-anchor>

    <!-- 基础用法DEMO -->
    <g-block-box
      :title="'基础用法'"
      introduction="基础的按钮用法。"
      id="checkbox-simple"
    >
      <template v-slot:demo>
        <g-checkbox v-model="checked" @change="handChange1">备选项</g-checkbox>
      </template>
      <template v-slot:description>
        <p>
          在g-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。
        </p>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(checkbox.baseCode) }}</code>
      </template>
    </g-block-box>

    <!-- 禁用状态 -->
    <g-block-box
      :title="'禁用状态'"
      introduction="多选框不可用状态。"
      id="checkbox-disabled"
    >
      <template v-slot:demo>
        <g-checkbox v-model="checked1" disabled>备选项1</g-checkbox>
        <g-checkbox v-model="checked2" disabled>备选项2</g-checkbox>
      </template>
      <template v-slot:description>
        设置disabled属性即可。
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(checkbox.disableCode) }}</code>
      </template>
    </g-block-box>

    <!-- 多选框组 -->
    <g-block-box
      :title="'多选框组'"
      introduction="适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。"
      id="checkbox-group"
    >
      <template v-slot:demo>
        <g-checkbox-group v-model="checkList" @change="handGroup">
          <g-checkbox label="复选框A"></g-checkbox>
          <g-checkbox label="复选框B"></g-checkbox>
          <g-checkbox label="复选框C"></g-checkbox>
        </g-checkbox-group>
      </template>
      <template v-slot:description>
        <p>
          checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 g-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
        </p>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(checkbox.groupCode) }}</code>
      </template>
    </g-block-box>

    <!-- API -->
    <div id="checkbox-api">
      <h3 class="demo-table-title">Checkbox Attributes</h3>
      <P class="demo-table-introduction">属性说明如下：</P>
      <g-table-simple :source="attributesSource" type="demo"/>
    </div>

    <div>
      <h3 class="demo-table-title">Checkbox Events</h3>
      <g-table-simple :source="eventSource" type="event"/>
    </div>

    <div>
      <h3 class="demo-table-title">Checkbox-group Attributes</h3>
      <P class="demo-table-introduction">属性说明如下：</P>
      <g-table-simple :source="groupAttributesSource" type="demo"/>
    </div>

    <div>
      <h3 class="demo-table-title">Checkbox Events</h3>
      <g-table-simple :source="groupEventSource" type="event"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: ['复选框A','复选框B'],
      checkList1: ["复选框 A"],
      checked: true,
      checked1: false,
      checked2: true,
      checkbox: {
        baseCode: `
        <template>
          <!-- checked 为 true 或 false -->
          <g-checkbox v-model="checked">备选项</g-checkbox>
        </template>

        <script>
          export default {
            data() {
              return {
                value: false
              }
            }
          }
        <\/script>
        `,
        groupCode: `
          <template>
            <g-checkbox-group v-model="checkList">
              <g-checkbox label="复选框A"></g-checkbox>
              <g-checkbox label="复选框B"></g-checkbox>
              <g-checkbox label="复选框C"></g-checkbox>
            </g-checkbox-group>
          </template>

          <script>
            export default {
              data() {
                return {
                  checkList: ['复选框A','复选框B']
                }
              }
            }
        <\/script>
        `,
        disableCode: `
          <template>
            <g-checkbox v-model="checked1" disabled>备选项1</g-checkbox>
            <g-checkbox v-model="checked2" disabled>备选项2</g-checkbox>
          </template>

          <script>
            export default {
              data() {
                return {
                  checked1: false,
                  checked2: true
                }
              }
            }
          <\/script>
        `
      },
      attributesSource: [
        {
          parameter: 'value / v-model',
          description: '绑定值',
          dataTypes: 'boolean',
          optional: '',
          default: ''
        }
      ],
      eventSource:[
        {
          parameter: 'change',
          description: '当绑定值变化时触发的事件',
          param: '更新后的值',
        },
      ],
      groupAttributesSource: [
        {
          parameter: 'value / v-model',
          description: '绑定值',
          dataTypes: 'array',
          optional: '',
          default: ''
        }
      ],
      groupEventSource:[
        {
          parameter: 'change',
          description: '当绑定值变化时触发的事件',
          param: '更新后的值',
        },
      ],
    }
  },
  methods: {
    handGroup(val) {
      console.log(val);
    },
    handChange1(val) {
      console.log(val);
    }
  }
}
</script>


<style lang="scss" scoped>
.g-checkbox {
  margin-right: 30px;
}
</style>